@import '../../style/mixin.less';

.nft-approval {
  .page();
  padding: 0 16px;
  position: relative;
  .chain-tag-selector {
    margin-bottom: -10px;
  }
  .card-risk-amount {
    padding: 14px;
    border-radius: 6px;
    background-color: #fff;
    margin-bottom: 18px;

    &-title {
      font-size: 12px;
      line-height: 14px;
      color: @color-comment-1;
      margin-bottom: 4px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      img {
        width: 12px;
        display: inline-block;
      }
    }
    &-content {
      text-align: center;
      font-weight: 500;
      font-size: 20px;
      line-height: 23px;
      color: @color-title;
      .ellipsis();
    }
  }
  .ant-tabs {
    &-tab {
      padding: 6px 0;
      font-weight: 500;
      font-size: 13px;
      line-height: 15px;
      color: @color-comment-1;
    }
    &-nav {
      margin-bottom: 12px;
      &::before {
        display: none;
      }
    }
  }
  &,
  &-popup-search {
    .approval-card {
      background: #ffffff;
      border: 1px solid @color-border;
      border-radius: 6px;
      &:not(:last-child) {
        margin-bottom: 20px;
      }
      &-header {
        background: #e5e9ef;
        border-radius: 6px 6px 0px 0px;
        display: flex;
        padding: 12px;
        justify-content: space-between;
      }
      .column-title {
        font-weight: 400;
        font-size: 12px;
        line-height: 14px;
        color: @color-comment-1;
      }
    }
    .list {
      border-radius: 6px;
      background-color: #fff;
      &-header {
        display: flex;
        justify-content: space-between;
      }
      .column-title {
        padding: 12px;
        font-size: 12px;
        line-height: 14px;
        color: #707880;
      }

      .search {
        border: 1px solid transparent;
        border-bottom: 1px solid @color-border;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        gap: 8px;
        .placeholder {
          font-size: 13px;
          line-height: 15px;
          color: #707880;
          opacity: 0.4;
        }
        &:hover {
          border: 1px solid var(--r-blue-default, #7084ff);
          box-sizing: border-box;
          border-radius: 6px;
        }
      }
      &-item {
        display: flex !important;
        align-items: center;
        padding: 10px 8px 10px 12px;
        border: 1px solid transparent;
        border-radius: 6px;
        gap: 8px;
        overflow: hidden;
        cursor: pointer;
        &:hover {
          background: var(--r-blue-light-1, #eef1ff);
          border: 1px solid var(--r-blue-default, #7084ff);
          .list-item-extra > * {
            display: none;
          }
          .ant-btn {
            display: block;
          }
        }
        &-avatar {
          width: 32px;
          height: 32px;
          object-fit: cover;
          border-radius: 2px;
          flex-shrink: 0;
          border: none;
          .nft-avatar-image {
            border-radius: 2px;
          }
        }
        &-title {
          font-weight: 500;
          font-size: 13px;
          line-height: 15px;
          color: @color-title;
          .ellipsis();
          max-width: 200px;
          margin-bottom: 2px;
        }
        &-desc {
          font-size: 12px;
          line-height: 14px;
          color: #707880;
          .ellipsis();
        }
        &-extra {
          margin-left: auto;
          text-align: right;
          .ant-btn {
            display: none;
            background-color: rgba(236, 81, 81, 0.1) !important;
            border: 1px solid #ec5151;
            box-sizing: border-box;
            border-radius: 20px;
            color: #ec5151;
            font-size: 12px;
            line-height: 14px;
            font-weight: normal;
            box-shadow: none !important;
            &::before {
              display: none !important;
            }
          }
        }
      }
    }
  }
  .list-body {
    height: 295px;
    overflow: auto;
  }

  &-card {
    border: 1px solid @color-border;
    border-radius: 6px;
    &:not(:last-child) {
      margin-bottom: 20px;
    }
    &-header {
      background-color: @color-border;
      padding: 12px;
      border-radius: 6px 6px 0px 0px;
      display: flex;
      gap: 12px;
      align-items: center;
    }
    &-icon {
      width: 32px;
      height: 32px;
      object-fit: cover;
      border-radius: 50%;
    }
    &-title {
      font-weight: 500;
      font-size: 15px;
      line-height: 18px;
      margin-bottom: 2px;
      color: #131419;
      .ellipsis();
      max-width: 300px;
    }
    &-desc {
      font-size: 14px;
      line-height: 16px;

      color: @color-comment-1;
      .ellipsis();
    }
    &-body {
      background-color: #fff;
      border-radius: 6px;
    }
  }
  &-tag {
    background: @color-border;
    border-radius: 2px;
    font-size: 12px;
    line-height: 14px;
    color: @color-comment-1;
    padding: 2px 4px;
    font-weight: 400;
  }

  &-popup-search {
    .ant-drawer-body {
      padding-top: 0;
      header {
        position: sticky;
        top: 0;
        padding-top: 12px;
        padding-bottom: 20px;
        background-color: #fff;
        z-index: 1;
      }
    }
    .ant-input-affix-wrapper::before {
      height: 16px;
    }
    .ant-input-affix-wrapper-focused {
      border-color: var(--r-blue-default, #7084ff) !important;
      background-color: var(--r-blue-light-1, #eef1ff) !important;
    }
    .ant-input-affix-wrapper-lg {
      padding: 12px;
      border-radius: 6px;
      border: 1px solid @color-border;
      background-color: @color-bg;
      transition: border-color 0.3s;
      .ant-input {
        border-radius: 0;
        background-color: transparent;
      }
      &:hover,
      &.active {
        border-color: var(--r-blue-default, #7084ff);
      }
    }
  }
  &-popup-card {
    .ant-drawer-body {
      padding: 0;
    }
    .token-approval {
      &-card {
        border: none;
        &-header {
          padding: 20px;
          border-radius: 16px 16px 0 0;
          position: sticky;
          top: 0;
          z-index: 1;
        }

        .column-title {
          padding: 20px;
          padding-bottom: 12px;
        }
      }
      &-project-item {
        padding-left: 20px;
        padding-right: 20px;
      }
    }
  }
}
